study-builder/FDA HTML/active-task-new-screen-1.html

<!DOCTYPE html> <html> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>FDA</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="">  <link rel="shortcut icon" href="#" type="image/x-icon" /> <link rel="apple-touch-icon" href="#">  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">  <link rel="stylesheet" href="vendor/boostrap/bootstrap.min.css"> <link rel="stylesheet" href="vendor/datatable/css/dataTables.bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="vendor/dragula/dragula.min.css"> <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css"> <link rel="stylesheet" href="vendor/font-awesome/font-awesome.min.css"> <link rel="stylesheet" href="vendor/select2/bootstrap-select.min.css"> <link rel="stylesheet" href="vendor/animation/animate.css">  <link rel="stylesheet" href="css/sprites_icon.css"> <link rel="stylesheet" href="css/sprites_v3.css"> <link rel="stylesheet" href="css/layout.css">  <link rel="stylesheet" href="css/theme.css"> <link rel="stylesheet" href="css/style.css">  <script src="vendor/modernizr/modernizr.js"></script> </head> <body> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-none white-bg hd_con"> <div class="md-container">  <nav class="navbar navbar-inverse"> <div class="container-fluid p-none"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="images/logo/logo-sm.png"/></a> </div> <div class="collapse navbar-collapse p-none" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Studies</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">repository <span><i class="fa fa-angle-down" aria-hidden="true"></i></span></a> <ul class="dropdown-menu"> <li><a href="#">Reference Tables</a></li> <li><a href="#">QA content</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Gateway app level content</a></li> <li><a href="#">Legal Text</a></li> </ul> </li> <li><a href="#">Notifications</a></li> <li><a href="#">Users</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Samuel Johnson <span><i class="fa fa-angle-down" aria-hidden="true"></i></span></a></li> </ul> </div> </div> </nav> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-none mt-lg"> <div class="md-container white-bg"> <div class="row lc-gray-bg">  <div class="col-sm-2 col-lc p-none"> <div class="left-content-container wid100"> <ul> <li>Create Study</li> <li class="active">1. Basic Information</li> <li>2. Settings and Admins</li> <li>3. Overview</li> <li>4. Eligibility</li> <li>5. Consent</li> <li>6. Study Exercises</li> <li>7. Study Dashboard</li> <li>8. Miscellaneous</li> <li>9. Checklist</li> <li>10. Actions</li> </ul> </div> </div>   <div class="col-sm-10 col-rc white-bg p-none">  <div class="right-content-head"> <div class="text-right"> <div class="black-md-f dis-line pull-left line34"> <span class="mr-sm"><a href="#"><img src="images/icons/back-b.png"/></a></span> Add Active Task </div> <div class="dis-line form-group mb-none mr-sm"> <button type="button" class="btn btn-default gray-btn">Cancel</button> </div> <div class="dis-line form-group mb-none mr-sm"> <button type="button" class="btn btn-default gray-btn">Save</button> </div> <div class="dis-line form-group mb-none"> <button type="button" class="btn btn-primary blue-btn">Done</button> </div> </div> </div>   <div class="right-content-body pt-none pl-none pr-none"> <ul class="nav nav-tabs review-tabs gray-bg"> <li class="active"><a data-toggle="tab" href="#sla">Content</a></li> <li><a data-toggle="tab" href="#qla">Schedule</a></li> <li><a data-toggle="tab" href="#rla">Response-level Attributes</a></li> </ul> <div class="tab-content pl-xlg pr-xlg">  <div id="sla" class="tab-pane fade in active mt-xlg"> <div class="row"> <div class="col-md-12 pl-none"> <div class="blue-md-f mb-md text-uppercase"> Select Active Task </div> </div> <div class="clearfix"></div> <div class="col-md-4 col-lg-3 p-none"> <div class="gray-xs-f mb-xs">Choose from a list of pre-defined active tasks </div> <div class="form-group mb-none"> <select id="dp" class="selectpicker" title="Select" required> <option selected> Practice test for heart rate measurement</option> <option> X-minute walk test</option> <option>X-minute run test</option> <option>X-minute step test</option> </select> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="col-md-12 col-lg-12 p-none"> <div class="form-group " style="margin-top: -15px;"><i> This task allows users to practice heart rate measurement using their phone's camera</i></div> </div> <div class="clearfix"></div> <div class="col-md-4 col-lg-3 p-none"> <div class="gray-xs-f mb-xs">Activity Short Title or Key (50 characters max) <span class="requiredStar"> * </span> <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="" data-original-title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div> <div class="form-group mb-none"> <input type="text" class="form-control"> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="clearfix"></div> <div class="col-md-4 col-lg-3 p-none"> <div class="gray-xs-f mb-xs">Display name (150 characters max) <span class="requiredStar"> * </span> <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="" data-original-title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div> <div class="form-group mb-none"> <input type="text" class="form-control"> <div class="help-block with-errors red-txt"></div> </div> </div> </div> </div>  <div id="qla" class="tab-pane fade mt-xlg"> <div class="col-md-10 p-none"> <div class="gray-xs-f mb-xs">Text of the question</div> <div class="form-group"> <input type="text" class="form-control" placeholder="Type the question you wish to ask the participant" /> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="col-md-10 p-none"> <div class="gray-xs-f mb-xs">Description of the question</div> <div class="form-group"> <textarea class="form-control" rows="4" id="comment" placeholder="Enter a line that describes your question, if needed"></textarea> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="clearfix"></div> <div> <div class="gray-xs-f mb-xs">Is this a Skippable Step?</div> <div> <span class="radio radio-info radio-inline p-45"> <input type="radio" id="inlineRadio1" value="option1" name="radioInline1"> <label for="inlineRadio1">Yes</label> </span> <span class="radio radio-inline"> <input type="radio" id="inlineRadio2" value="option1" name="radioInline1"> <label for="inlineRadio2">No</label> </span> <div class="help-block with-errors red-txt"></div> </div> </div> <div> <div class="gray-xs-f">Response Type</div> <div class="gray-xs-f mb-xs"><small>The type of interface needed to capture the response</small></div> <div class="clearfix"></div> <div class="col-md-4 col-lg-3 p-none"> <div class="form-group"> <select id="dp" class="selectpicker" title="Select" required> <option>Step 4: DosageQuestion</option> <option>Step 4: DosageQuestion</option> <option>Step 4: DosageQuestion</option> </select> <div class="help-block with-errors red-txt"></div> </div> </div> </div> <div class="clearfix"></div> <div class="row"> <div class="col-md-6 pl-none"> <div class="gray-xs-f mb-xs">Description of response type</div> <div> Represents a response format that lets participants select a value on a continuous scale. </div> </div> <div class="col-md-6"> <div class="gray-xs-f mb-xs">Data Type</div> <div>Double</div> </div> </div> <div class="clearfix"></div> <div class="mt-lg mb-lg"> <span class="checkbox checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> <label for="inlineCheckbox1"> Add response data to line chart on app dashboard </label> </span> </div> <div class="clearfix"></div> <div class="col-md-6 p-none"> <div class="gray-xs-f mb-xs">Time range for the chart</div> <div class="form-group"> <input type="text" class="form-control" placeholder="Type the question you wish to ask the participant" /> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="clearfix"></div> <div> <div class="gray-xs-f mb-xs">Allow rollback of chart? <span class="sprites_icon info"></span></div> <div> <span class="radio radio-info radio-inline p-45"> <input type="radio" id="inlineRadio1" value="option1" name="radioInline1"> <label for="inlineRadio1">Yes</label> </span> <span class="radio radio-inline"> <input type="radio" id="inlineRadio2" value="option1" name="radioInline1"> <label for="inlineRadio2">No</label> </span> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="clearfix"></div> <div class="col-md-4 col-lg-3 p-none"> <div class="gray-xs-f mb-xs">Title for the chart</div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> <div class="clearfix"></div> <div class="bor-dashed mt-sm mb-md"></div> <div class="clearfix"></div> <div class="mb-lg"> <span class="checkbox checkbox-inline"> <input type="checkbox" id= "inlineCheckbox1" value="option1"> <label for="inlineCheckbox1"> Use response data for statistic on dashboard</label> </span> </div> <div class="clearfix"></div> <div class="col-md-4 col-lg-3 p-none"> <div class="gray-xs-f mb-xs">Short identifier name</div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> <div class="clearfix"></div> <div class="col-md-10 p-none"> <div class="gray-xs-f mb-xs">Display name for the Stat (e.g. Total Hours of Activity Over 6 Months)</div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> <div class="clearfix"></div> <div class="col-md-4 col-lg-3 p-none"> <div class="gray-xs-f mb-xs">Display Units (e.g. hours)</div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> <div class="clearfix"></div> <div class="col-md-4 col-lg-3 p-none"> <div class="gray-xs-f mb-xs">Stat Type for image upload</div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> <div class="clearfix"></div> <div class="col-md-10 p-none"> <div class="gray-xs-f mb-xs">Formula for to be applied</div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> <div class="clearfix"></div> <div class="col-md-10 p-none"> <div class="gray-xs-f mb-xs">Time ranges options available to the mobile app user</div> <div class="clearfix"></div> </div> <div class="clearfix"></div> <div> <div> <span class="mr-lg"><span class="mr-sm"><img src="images/icons/tick.png"/></span><span>Current Week</span></span> <span class="mr-lg"><span class="mr-sm"><img src="images/icons/tick.png"/></span><span>Current Week</span></span> <span class="mr-lg"><span class="mr-sm"><img src="images/icons/tick.png"/></span><span>Current Month</span></span> <span class="txt-gray">(Rollback option provided for these three options)</span> </div> <div class="mt-sm"> <span class="mr-lg"><span class="mr-sm"><img src="images/icons/tick.png"/></span><span>Custom Start and End Date</span></span> </div> </div> </div>  <div id="rla" class="tab-pane fade mt-xlg"> <div class="col-md-4 col-lg-3 p-none"> <div class="gray-xs-f mb-xs">Response Type * <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div> <div class="form-group"> <input type="text" class="form-control" disabled> </div> </div> <div class="clearfix"></div> <div class="row"> <div class="col-md-6 pl-none"> <div class="gray-xs-f mb-xs">Description of response type</div> <div> Represents an answer format that includes a slider control. </div> </div> <div class="col-md-6"> <div class="gray-xs-f mb-xs">Data Type</div> <div>Double</div> </div> </div> <div class="clearfix"></div> <div class="mt-lg"> <div class="gray-xs-f mb-xs">Scale Type</div> <div> <span class="radio radio-info radio-inline p-45"> <input type="radio" id="inlineRadio4" value="option2" name="radioInline3"> <label for="inlineRadio4">Vertical</label> </span> <span class="radio radio-inline"> <input type="radio" id="inlineRadio3" value="option2" name="radioInline3"> <label for="inlineRadio3">Horizontal</label> </span> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="clearfix"></div> <div class="row"> <div class="col-md-6 pl-none"> <div class="col-md-8 col-lg-8 p-none"> <div class="gray-xs-f mb-xs">Minimum Value * <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> </div> <div class="col-md-6 pl-none"> <div class="col-md-8 col-lg-8 p-none"> <div class="gray-xs-f mb-xs">Maximum Value * <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> </div> </div> <div class="clearfix"></div> <div class="row mt-sm"> <div class="col-md-6 pl-none"> <div class="col-md-8 col-lg-8 p-none"> <div class="gray-xs-f mb-xs">Default value (slider position) * <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> </div> </div> <div class="clearfix"></div> <div class="col-md-10 p-none"> <div class="gray-xs-f mb-xs">Description for minimum value</div> <div class="form-group"> <input type="text" class="form-control" placeholder="Type the question you wish to ask the participant" /> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="clearfix"></div> <div class="col-md-10 p-none"> <div class="gray-xs-f mb-xs">Description for maximum value</div> <div class="form-group"> <input type="text" class="form-control" placeholder="Type the question you wish to ask the participant" /> <div class="help-block with-errors red-txt"></div> </div> </div> <div class="col-md-4 col-lg-4 p-none mb-lg"> <div class="gray-xs-f mb-xs">Max Fraction Digits * <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div> <div class="form-group"> <input type="text" class="form-control"> </div> </div> </div> </div> </div> </div>  </div> </div> </div> <div class="clearfix"></div>  <div class="md-container ft_con"> <div class="foot"> <span>Copyright © 2016 FDA</span><span><a href="#">Terms</a></span><span><a href="#">Privacy Policy</a></span> </div> </div>   <script src="vendor/jquery/jquery-3.1.1.min.js"></script> <script src="vendor/boostrap/bootstrap.min.js"></script> <script src="vendor/animation/wow.min.js"></script> <script src="vendor/datatable/js/jquery.dataTables.min.js"></script> <script src="vendor/select2/bootstrap-select.min.js"></script> <script src="vendor/dragula/react-dragula.min.js"></script> <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script> <script src="js/jquery.nicescroll.min.js"></script> <script src="vendor/tinymce/tinymce.min.js"></script>  <script src="js/theme.js"></script> <script src="js/common.js"></script> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var a = $(".col-lc").height(); var b = $(".col-rc").height(); if(a > b){ $(".col-rc").css("height", a); }else{ $(".col-rc").css("height", "auto"); } }); }); </script> </body> </html>

study-builder/FDA HTML/active-task-new-screen-1.html (438 lines of code) (raw):